<template>
  <view>
    <u-popup zIndex="10070" :overlayOpacity="overlayOpacity" :closeOnClickOverlay="closeOnClickOverlay" bgColor="transparent" mode="center" :show="show" @close="close" @open="open">
      <div class="wrap">
        <view :style="{fontFamily:_style_com.fontFamily,direction:_style_com.direction,fontSize:_style_com.fs}" class="title">{{ title }}</view>
<!--        <view class="author">作者QQ：2282017407@qq.com</view>-->
        <view class="alert">
          <view class="content">
            <view class="icon"><image :src="'/static/daoju/'+icon+'.png'"></image></view>
            <text :style="{fontFamily:_style_com.fontFamily,direction:_style_com.direction,fontSize:_style_com.fs}" class="text">{{ text }}</text>
            <view class="btn-list">
              <view v-if="clickType!=='fuHuo0'" @click="playAd" class="top btn">
                <block v-if="random===1">
                  <u-icon name="share-fill" color="#000" size="25"></u-icon>
                  <button open-type="share" ></button>
                </block>
                <u-icon v-else name="play-circle-fill" color="#000" size="25"></u-icon>
                <view :style="{fontFamily:_style_com.fontFamily,direction:_style_com.direction,fontSize:_style_com.fs}">{{ yesBtn?yesBtn:$t('alert.yesBtn') }}</view>
              </view>
              <view :style="{fontFamily:_style_com.fontFamily,direction:_style_com.direction,fontSize:_style_com.fs}" v-if="clickType==='fuHuo' || clickType==='fuHuo0'" @click="emitClick" class="bottom btn">{{ $t('alert.fuHuo') }}</view>
              <view :style="{fontFamily:_style_com.fontFamily,direction:_style_com.direction,fontSize:_style_com.fs}" v-else @click="show = false" class="bottom btn">{{ $t('alert.bu') }}</view>
            </view>
          </view>
        </view>
      </div>
    </u-popup>
  </view>
</template>
<script>
import store from "@/store/index.js"
// 在页面中定义激励视频广告
let videoAd = null
export default {
    props: {
      title:String,
      text:String,
      icon: {
        type:String,
        default: "center"
      },
      yesBtn:String,
      clickType:String
    },
    data() {
      return {
        show: false,
        closeOnClickOverlay:false,
        overlayOpacity:'0.6',
        random:1,
        Id:""
      }
	  },
	  mounted() {
		// #ifdef MP
		this.Id = store.state.data.setting.adId || "";
		// #endif
	  },
    computed:{
      _style_com(){
        return this.$t('style')
      }
    },
	  methods: {
      emitClick(){
        this.$emit('clickReStart')
      },
      playAd(){
        this.$emit('click')
      },
      open() {
        //1:分享   2至n ： 广告
        this.random = Math.ceil(Math.random()*3); //1~3
        if (!this.Id) {
          this.random = 1
        }
        this.show = true
      },
      close() {
        this.show = false
      },
      adStart(){
        let that = this;
		// #ifdef H5
			return new Promise((resolve , reject)=>{
			  this.close()
			  resolve({isEnded:true})
			})
		// #endif
		// #ifdef MP
			if (this.random===1){
			  return new Promise((resolve , reject)=>{
			    this.close()
			    resolve({isEnded:true,type:'share'})
			  })
			}else {
			    uni.showLoading({
			      title:"请稍等...",
			      icon:"none",
			      mask:true
			    })
			  return new Promise((resolve , reject)=>{
			    // 在页面onLoad回调事件中创建激励视频广告实例
			    if (uni.createRewardedVideoAd) {
			      videoAd = uni.createRewardedVideoAd({
			        adUnitId: 'adunit-'+this.Id
			      })
			      setTimeout(()=>{uni.hideLoading()},4000)
			      videoAd.onLoad(() => {uni.hideLoading()})
			      videoAd.onError((err) => {uni.hideLoading()})
			      videoAd.onClose((res) => {
			        uni.hideLoading()
			        resolve(res)
			      })
			    }
			    // 用户触发广告后，显示激励视频广告
			    if (videoAd) {
			      videoAd.show().catch(() => {
			        // 失败重试
			        videoAd.load()
			            .then(() =>{
			              uni.hideLoading() 
			              videoAd.show()
			            })
			            .catch(err => {
			              reject(err)
			              console.log('激励视频 广告显示失败')
			        })
			      })
			    }
			  })
			}
		// #endif
      }
	}
}
</script>
<style lang="scss" scoped>
.wrap{
  width: 450rpx;
  min-height: 700rpx;
  position: relative;
  text-align: center;
  .title{
    background-color: black;
    display: inline-block;
    padding: 15rpx 60rpx;
    font-size: 32rpx;
    border-radius: 10rpx;
    box-shadow: 0 15rpx 0 0 #b2b2b4;
    position: relative;
    z-index: 1;
    color: yellow;
  }
  .alert{
    height: 650rpx;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    border:10rpx solid #000;
    border-radius: 20rpx;
    z-index: 0;
    background-color: #ffffff;
    .content{
      width: 96%;
      height: 97%;
      margin: 8rpx auto;
      border:4rpx solid #b2b2b4;
      border-radius: 20rpx;
      .btn-list{
        margin-top: 50rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .top{
          background-color: yellow;
        }
        view{
          margin-left: 10rpx;
        }
        .btn{
          height: 80rpx;
          width: 65%;
          line-height: 80rpx;
          border-radius: 20rpx;
          border:4rpx solid #000;
          margin-bottom: 25rpx;
          color: #000000;
          font-weight: bold;
          display: flex;
          flex-direction: row;
          justify-content: center;
          font-size: 36rpx;
          position: relative;
          button{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            opacity: 0;
          }
        }
      }
      .text{
        padding: 0 10rpx;
        margin-top: 20rpx;
        display: inline-block;
        color: black;
      }
      .icon{
        margin: 60rpx auto 0;
        width: 200rpx;
        height: 200rpx;
        line-height: 200rpx;
        text-align: center;
        border-radius: 100%;
        background-color: #000000;
        image{
          width: 110rpx;
          height: 110rpx;
          margin-top: 46rpx;
        }
      }
    }
  }
}
</style>

